(function() {
  function Chart(containerId, dw, cir_r, cir_color, line_w, fill_color, percent, remaindTime) {
    this.containerId = containerId;
    this.remaindTime = remaindTime || 0;
    this.dw = dw;
    this.cir_r = cir_r;
    this.cir_color = cir_color;
    this.line_w = line_w;
    this.fill_color = fill_color;
    this.percent = percent;
    this.pper = 0;

    this.init();

    this.render();
  }

  Chart.prototype.init = function() {
    this.$container = $(this.containerId);

    this.$canvas = $('<canvas></canvas>');
    this.canvas = this.$canvas.get(0);
    this.$persentEle = $('<div class="persent"></div>')

    this.$container.append(this.$canvas);
    this.$container.append(this.$persentEle);
  }

  Chart.prototype.render = function() {
    this.drawCanvanPercent(this.dw, this.cir_r, this.cir_color, this.line_w, this.fill_color);
    this.drawTicks(this.cir_r);
  }

  Chart.prototype.drawCanvanPercent = function(dw,cir_r,cir_color,line_w,fill_color) {
    if(dw=="rem"){
      cir_r = cir_r*(this.$container.width()/2);
      // line_w = line_w * (window.screen.width/5);
    }

    var circle = {
        r : cir_r/2,      //圆的半径
        r2 : cir_r/2,
        per : this.percent,      //百分比分子
        color : cir_color,      //圆的颜色
        lineWidth : line_w      //圆的颜色
    };

    this.circle = circle;

    this.canvas.width = this.canvas.height= circle.r * 2;
    this.canvas.style.borderRadius="50%";

    if(this.canvas.getContext){
        var ctx = this.canvas.getContext("2d");
        ctx.fillStyle = fill_color;
        ctx.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, Math.PI*0, Math.PI*2, true);
        ctx.fill();
        var that = this;
        var pper_interal= requestAnimationFrame(function () {
          that.drawMove(ctx,circle, that.$persentEle, pper_interal);
        });

        // var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = "#22b295";
        ctx.lineWidth = circle.lineWidth;
        ctx.arc(circle.r, circle.r, circle.r, Math.PI*0.22, Math.PI*0.78, true);  //以逆时针的方式，从0.15PI的位置画到0.85PI。总角度为234度
        ctx.stroke();

    }
  }

  Chart.prototype.update = function(percent, remaindTime) {
    this.remaindTime = remaindTime || 0 ;
    var ctx = this.canvas.getContext("2d");
    var that = this;
    this.percent = percent;
    this.circle.per = percent;
    this.$persentEle.html(secondToDate(this.remaindTime));
    var pper_interal= requestAnimationFrame(function () {
      that.drawMove(ctx, that.circle, that.$persentEle, pper_interal);
    });
  }

  Chart.prototype.drawMove = function(ctx, circle, pper_interal){
    if(this.pper >= circle.per){
      this.pper = circle.per;
      cancelAnimationFrame(pper_interal);
      return;
    }else{
      this.pper++;
    }
//  this.$persentEle.html(secondToDate(this.remaindTime));
    ctx.beginPath();
    var g = ctx.createLinearGradient(0,0,180,0);  //创建渐变对象  渐变开始点和渐变结束点
    g.addColorStop(0, '#F17436'); //添加颜色点
    g.addColorStop(1, '#FFFF5E'); //添加颜色点
    ctx.strokeStyle = g;     //使用渐变对象作为圆环的颜色

    ctx.lineWidth = circle.lineWidth;
    ctx.arc(circle.r, circle.r, circle.r, Math.PI*0.78, Math.PI*((this.pper/100)*246/180 + 0.78), false); //这里的仪表盘总度数为234。即(2-0.85)*Math.PI
    ctx.stroke();

    var that = this;
    var pper_interal = requestAnimationFrame(function () {
      that.drawMove(ctx,circle, that.$persentEle, pper_interal);
    });
  }

  Chart.prototype.drawTicks = function (cir_r){
    var  cir_r = cir_r*(this.$container.width()/2);
    var circle = {
      r : cir_r/2,      //圆的半径  ,
    };

    var context0 = this.canvas.getContext("2d");
    for(var i = 7;i < 34;i++){
      //保存当前状态
      context0.save();
      //刻度粗细
      context0.lineWidth = 0.1;
      //刻度颜色
      context0.strokeStyle = "#1B958B"
      //设置00点,以画布中心为00
      context0.translate(circle.r,circle.r);
      //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
      context0.rotate(i * 9 * Math.PI / 180);
      context0.beginPath();
      //刻度起始点
      context0.moveTo(0,circle.r - 15);
      //刻度结束点
      context0.lineTo(0,circle.r - 17);
      context0.closePath();
      context0.stroke();
      //将旋转后的图片返回原画布
      context0.restore();
    }
    //利用半径与半径与x轴夹角绘制单个刻度

}

function secondToDate(result) {
  var h = Math.floor(result / 3600) < 10 ? '0'+Math.floor(result / 3600) : Math.floor(result / 3600);
  var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
  var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
  return result = h + ":" + m + ":" + s;
}

window.Chart = Chart;
})()
